<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .loading{position: fixed;left:0;top:0;display: none;}
    </style>
</head>
<body>
    <!-- 登录 -->
    <input type="text" id="username"><br>
    <input type="text" id="password"><br>
    <input type="button" value="登录" id="login">

    <!-- 登录成功后才能查看会议室信息 -->
    <div class="meetRoom">
        <ul>
        </ul>
    </div>

    <img class="loading" src="./loading.jpg" alt="">
</body>
<script>

    // get:http://10.11.54.89:3000/login
        // username
        // password

    // post:http://10.11.54.89:3000/getallroom
        // token

    const oun = document.querySelector("#username");
    const opw = document.querySelector("#password");
    const obtn = document.querySelector("#login");
    const oloading = document.querySelector(".loading");

    const oMr = document.querySelector(".meetRoom");

    let token = "";

    obtn.onclick = function(){
        // oun.value
        // opw.value
        ajax({
            url:"http://10.11.54.89:3000/login",
            data:{
                username:oun.value,
                password:opw.value
            },
            success:(res)=>{
                oloading.style.display = "none";
                if(res.code === 0){
                    console.log(res)
                    ajax({
                        url:"http://10.11.54.89:3000/getallroom",
                        data:{
                            token:res.data.token
                        },
                        success:(meetRes)=>{
                            console.log(meetRes)
                        },
                        method:"post"
                    })
                }else{
                    
                }
            },
            error:(code)=>{
                console.log("请求失败", code);
                oloading.style.display = "none";
            },
            timeout: 500,
            beforeSend:()=>{
                oloading.style.display = "block";
            }
        })
    }

    // ajax({
    //     url:"",
    //     method:"get",
    //     data:{
    //         username:oun.value,
    //         password:opw.value
    //     },
    //     success:(res)=>{},
    //     error:(code)=>{},
    //     beforeSend:()=>{},
    //     timeout:100,
    //     dataType:"json"
    // })

    function ajax({ url, error, success, data={}, method="get", beforeSend, timeout=1000, dataType="json" } = {}){
        // 设置参数的默认值
        // ops = ops || {}
        // 将参数对象解构赋值
        // const {url, success, ...} = ops;
        // 解构赋值得到的变量的默认值
        // method = method || "get"
        // timeout = tiemout || 1000

        // get和post请求过程
        // 共同点：解析数据，创建载体对象，配置载体对象，监听状态变化
        // 不同点：发送数据之前的格式设置，发送数据的位置

        // 发送请求之前，用来添加loading效果
        beforeSend && beforeSend();

        // 1. 解析数据
        let s = "";
        for(let i in data){
            s += `${i}=${data[i]}&`;
        }
        // 2. 拼接到url
        if(method === "get"){
            url += "?" + s + "__t__=" + Date.now();
        }
        // 3. 发起ajax请求
        const xhr = new XMLHttpRequest();
        xhr.open(method, url);
        xhr.timeout = timeout;
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                let d = dataType==="json" ? JSON.parse(xhr.responseText) : xhr.responseText;
                success( d );
            }
            if(xhr.readyState === 4 && xhr.status !== 200){
                error && error( xhr.status );
            }
        }
        // xhr.ontimeout = function(){
        //     error && error("tiemout");
        // }
        // 4. 发送请求
        if(method === "get"){
            xhr.send();
        }else if(method === "post"){
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(s.slice(0, -1));
        }
    }

    
</script>
</html>